<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			/* 1、外框*/
			
			.tab-box {
				width: 383px;
				margin: 20px auto;
				border: 1px solid #ccc;
				border-top: 2px solid #206F96;
			}
			/*2、标签头部*/
			
			.tab-head-div {
				width: 95px;
				
				text-align: center;
				float: left;
				background: yellowgreen;
				text-align: center;
				line-height: 30px;
				
				
				color: white;
				cursor: pointer;
			}
			
			/*.tab-head .last {
				border-right: 0;
			}*/
			
			.tab-head .current {
				background: yellowgreen;
				
				color: #000;
			}
			/* 3、标签内容*/
			
			.tab-body-div {
				margin: 30px 10px;
				margin-top: 40px;
				display: none;
			}
			
			.tab-body .current {
				display: block;
			}
			#btn{
				width: 300px;
				height: 550px;
				margin: 0 auto;
				background: yellowgreen;
			}
			.tab-head .b{
				padding: 4px;
			}
		</style>
	</head>

	<body>
		<div id="btn">
			
		
		<div class="tab-head">
			<div class="tab-head-div current">通知通告</div>
			<div class="tab-head-div">招标通告</div>
		    <div class="b">MORE></div>
		
		</div>
		<br>
		<div class="tab-body">
			<div class="tab-body-div current">123213</div>
			<div class="tab-body-div">21312321</div>
		</div>
		<script type="text/javascript">
			var tabs = document.getElementsByClassName('tab-head-div');
			var divs = document.getElementsByClassName('tab-body-div');
			//给标签对象循环添加鼠标移入事件
			for(var i = 0; i < tabs.length; i++) {
				tabs[i].onmouseover = function() {
					//循环判断哪个tab是当前鼠标移入对象
					for(var j = 0; j < divs.length; j++) {
						if(this == tabs[j]) {
							//下面这句给元素添加了class名：current
							//等同于css里设置的3条语句
							tabs[j].classList.add('current');
							divs[j].classList.add('current');
						} else {
							//去除元素的class名
							tabs[j].classList.remove('current');
							divs[j].classList.remove('current');
						}
					}
				};
			}
		</script>
		</div>
		<div id="a" onmouseover="over()" onmouseleave="leave()"></div>
	</body>

</html>